* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

ul, dl {
	list-style: none;
}

#app {
	position: relative;
	min-width: 1366px;
	height: 100%;
}

.ui-flex {
    display: flex;
    &-center {
        align-items: center;
    }
    &-between {
        justify-content: space-between;
    }
    &-full {
        flex: 1;
        min-width: 0;
    }
}

/* 超出隐藏 */
.ui-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.ui-ellipsis2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* 字体颜色 */
.ui-text-primary {
    color: #2d8cf0;
}
.ui-text-error {
    color: #ed4014;
}
.ui-text-gray {
    color: #868686;
}
.ui-text-disabled {
    color: #c0c2c8;
}

.ui-layout {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	&-header {
		position: absolute;
		top: 0;
		left: 130px;
		right: 0;
		height: 51px;
		text-align: right;
		border-bottom: 1px solid #ebebeb;
		background-color: #fff;
		z-index: 3;
		&__item {
			position: relative;
			display: inline-block;
			padding: 11px 20px;
			height: 50px;
			line-height: 28px;
			color: #969696;
			border-right: 1px solid #ebebeb;
			vertical-align: top;
			&:last-child {
			    border-right: 0;
			}
		}
	}
	&-sidebar {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 130px;
		color: #fff;
		background-color: #293139;
		overflow: hidden;
        overflow-y: auto;
		z-index: 9;
	}
	&-body {
		position: absolute;
		top: 51px;
		right: 0;
		bottom: 0;
		left: 130px;
		background-color: #f9f9f9;
		overflow: hidden;
	}
	&-content {
		padding: 10px;
		height: 100%;
		overflow: hidden;
        overflow-y: auto;
	    &-container {
	        position: relative;
	        padding: 20px;
            width: 100%;
            min-height: 100%;
            border: 1px solid #eee;
            background-color: #fff;
	    }
	}
	&-sideslip-menu {
        position: absolute;
        top: 51px;
        bottom: 0;
        left: 0;
        width: 130px;
    }
    &-submenu {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 130px;
        border-right: 1px solid #ebebeb;
        background-color: #fff;
        transition: width .3s;
        overflow: hidden;
        overflow-y: auto;
        z-index: 2;
    }
    &-footer {
        position: absolute;
        left: 130px;
        bottom: 0;
        right: 0;
        padding: 20px;
        height: 72px;
        box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        z-index: 8;
    }
    &-submenu-open {
        padding-left: 130px;
    }
    &-submenu-open ~ &-footer {
        left: 260px;
    }
}

.has-footer-bar {
    .ui-layout-body {
        padding-bottom: 72px;
    }
}
    
.ui-logo {
	width: 130px;
	height: 51px;
	line-height: 51px;
	text-align: center;
	font-size: 0;
	img {
		display: inline-block;
		max-width: 100%;
		max-height: 100%;
		vertical-align: middle;
	}
}

.ui-menu {
    display: block;
    margin: 0;
    padding: 0;
    outline: 0;
    list-style: none;
    color: #fff;
    font-size: 14px;
    z-index: 900;
    &-item {
        cursor: pointer;
        outline: 0;
        list-style: none;
        font-size: 14px;
        z-index: 1;
        cursor: pointer;
        transition: all .2s ease-in-out;
        &-box {
            display: block;
            padding: 14px 10px 14px 30px;
        }
        .ivu-icon {
            font-size: 16px;
            width: 16px;
            text-align: center;
        }
        .layout-text {
            margin-left: 16px;
        }
    }
    &-item:hover {
        background-color: #464646;
    }
    &-item-active {
        .ui-menu-item-box {
            padding-left: 28px;
            border-left: 2px solid #1ba2fc;
            background-color: #19222e;
        }
        .ui-layout-submenu {
            display: block;
        }
    }
}

.ui-submenu {
    list-style: none;
    color: #000;
    cursor: default;
    &-item {
        display: block;
        padding: 10px 10px 10px 30px;
        line-height: 30px;
        font-size: 12px;
        cursor: pointer;
    }
    &-item:hover {
        color: #1ba2fc;
    }
    &-item-active {
        color: #1ba2fc;
        background-color: #d1ecfe;
    }
    &-title {
        padding: 10px 10px 10px 30px;
        line-height: 30px;
        font-size: 12px;
        color: #a8a8a8;
    }
    &-divider {
        margin-left: 10px;
        width: 110px;
        height: 1px;
        background-color: #e1e2e3;
    }
    &-item-disabled {
        color: #bbb;
        background-color: #fff;
    }
    &-item-disabled:hover {
        color: #bbb;
    }
}

.m-header {
	.renew-btn {
		margin-left: 30px;
	    padding: 0;
	    width: 75px;
	    height: 28px;
	    border: 0;
	    vertical-align: top;
	    background-color: #ff8a8a;
	}
	.renew-btn:hover {
	    background-color: #feaeae;
	}
	.m-site {
		position: absolute;
		top: 50px;
		right: 0;
	    padding: 20px 15px; 
		width: 240px;
		color: #a9acac;
		font-size: 12px;
		text-align: left;
		line-height: 1.2;
	    background-color: #303840;
	    -webkit-transition: all 0.4s ease;
	    -moz-transition: all 0.4s ease;
	    -o-transition: all 0.4s ease;
	    transition: all 0.4s ease;
	    &-header {
	    	.withdrawal {
	    		float: right;
	    		color: #f49b06;
	    	}
	    }
	    &-balance {
	    	margin-top: 15px;
	    	color: #fff;
	    	font-size: 14px;
	    	a {
	    		font-size: 24px;
			    padding-right: 10px;
			    font-weight: 400;
	    	}
	    }
	    &-menus {
	    	margin-top: 15px;
	    	border-top: 1px solid #a9acac;
	    	&__item {
	    		margin-top: 15px;
	    	}
	    }
	    a {
			color: inherit;
		}
	    a:hover {
	    	color: #fff;
	    }
	}
}

/* 表格里的 */
.ui-table-cell {
    padding: 10px 0;
    line-height: 24px;
    &-line + &-line {
        margin-top: 10px;
    }
    .ui-ellipsis2 {
        height: 36px;
        line-height: 18px;
    }
    .ivu-poptip, .ivu-poptip-rel {
        display: block;
    }
}
.ui-text-cell {
    line-height: 20px;
}

/* table */
.ui-table {
    width: 100%;
    .ui-table-cell {
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* 选项卡样式 */
.ui-tab-navs {
    font-size: 0;
    &-cell {
        display: inline-block;
        padding: 9px;
        min-width: 120px;
        border: 1px solid #d2d2d2;
        border-radius: 3px;
        line-height: 16px;
        font-size: 12px;
        text-align: center;
        cursor: pointer;
        .title {
            color: #1ba2fc;
        }
        .desc {
            color: #bec2c8;
        }
    }
    &-cell + &-cell {
        margin-left: 20px;
    }
    &-cell.active {
        color: #fff;
        border-color: #1ba2fc;
        background-color: #1ba2fc;
        .title, .desc {
            color: #fff;
        }
    }
    &-cell.disabled {
        background-color: #fafafa;
        cursor: not-allowed;
        .title, .desc {
            color: #bec2c8;
        }
    }
}

/* 图片展示 */
.ui-image-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 60px;
    height: 60px;
    font-size: 0;
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: #fafafa;
    overflow: hidden;
    z-index: 1;
}
.ui-image-cell img {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    z-index: 1;
}
.ui-image-cell .ui-image-cell-lock {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('') no-repeat center;
    background-color: rgba(255, 255, 255, .5);
    z-index: 2;
}

/* 分割线 */
.ui-divider {
    margin: 10px 0;
    height: 1px;
    border-top: 1px solid #e4e4e4;
    &-dashed {
        border-top-style: dashed;
    }
}
/* 文字布局 */
.ui-text-line {
    display: flex;
    &-label {
        width: 66px;
        text-align: right;
    }
    &-value {
        flex: 1;
    }
    & + & {
        margin-top: 10px;
    }
}


/* 授权模块样式 */
.ui-empower {
    padding-top: 120px;
    text-align: center;
    color: #000;
    &__icon {
        margin-bottom: 30px;
        img {
            height: 50px;
        }
    }
    &__title {
        margin-bottom: 40px;
        font-size: 18px;
    }
    &__content {
        margin: 0 auto 20px;
        padding: 35px;
        width: 610px;
        font-size: 14px;
        border: 1px solid #1ba2fc;
        border-radius: 5px;
        background-color: #f6faff;
    }
}

/* 表单 */
.ui-form-inline {
    .ivu-form {
        &-item {
            display: inline-block;
            margin-right: 10px;
            margin-bottom: 10px;
            vertical-align: top;
            &-label {
                /*display: inline-block;
                float: none;*/
            }
            &-content {
                display: inline-block;
                > div {
                    vertical-align: top;
                }
            }
        }
    }
}

.ui-goods-cells {
    &__item {
        position: relative;
        display: inline-block;
        margin-right: 10px;
        margin-top: 10px;
        .delete {
            position: absolute;
            right: -8px;
            top: -8px;
            width: 16px;
            height: 16px;
            line-height: 16px;
            cursor: pointer;
            z-index: 2;
        }
        .title {
            height: 40px;
            line-height: 20px;
            vertical-align: top;
        }
    }
}

/* 抽屉格子 */
.ui-drawer-cells {
    margin: -16px -16px 0;
    &-cell {
        padding: 10px 15px;
        border-top: 1px solid #f0f0f0;
        p + p {
            margin-top: 10px;
        }
    }
    &-cell:first-child {
        border-top: 0;
    }
}

/* 未开放样式 */
.ui-advance-notice {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: url('../images/pic_advance_notice.png') no-repeat center;
}
